<template>
  <div>
    <h2>待办事项</h2>
    <draggable v-model="todos" @start="drag=true" @end="drag=false">
      <div v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </div>
    </draggable>
    <draggable @start="drag=true" @end="drag=false">
      <el-tag style="margin-left: 10px;">标签一</el-tag>
      <el-tag type="success" style="margin-left: 10px;">标签二</el-tag>
      <el-tag type="info" style="margin-left: 10px;">标签三</el-tag>
      <el-tag type="warning" style="margin-left: 10px;">标签四</el-tag>
      <el-tag type="danger" style="margin-left: 10px;">标签五</el-tag>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DraggableExample',
  components: {
    draggable
  },
  data() {
    return {
      todos: ['学习Vue', '学习React', '学习Angular'],
      drag: false
    }
  }
}
</script>
